<script setup lang='ts'>
import { onMounted, ref } from "vue";
import mitter from "../utils/mitt";
import footerVue from "./pc/footerVue.vue";
// const router = useRouter()
const active = ref(2);
onMounted(()=>{
  TabRouter(0)
})
const TabRouter = (index: number) => {
  switch (index) {
    case 0:
      mitter.emit('title', { title: '沙雕动画素材' })
      break;
    case 1:
      mitter.emit('title', { title: '分类' })
      break;
    case 2:
      mitter.emit('title', { title: '个人中心' })
      break;
  }
}
</script>

<template>
  <div class="m">
    <van-tabbar route fixed placeholder v-model="active" active-color="#C0C0C0" @change="TabRouter">
    <van-tabbar-item icon="home-o" :to="{ name: 'home' ,query:{isrouter:'0'}}">首页</van-tabbar-item>
    <van-tabbar-item icon="list-switch" :to="{ name: 'select',query:{num:0,isrouter:'1'} }">分类</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o" :to="{ name: 'user' ,query:{isrouter:'3'}}">我的</van-tabbar-item>
  </van-tabbar>
  </div>
  <div class="pc">
    <footerVue></footerVue>
  </div>
</template>

<style scoped>
.m{
    display: none;
  } 

  @media screen and (max-width:1024px) {
    .m {
        display: block;
    }

    .pc {
        display: none;
    }
}

@media screen and (min-width:1025px) {
    .m {
        display: none;
    }

    .pc {
        display: block;
    }
}
</style>